<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web2</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div class="outer" >
    <div class="mdiv" >
        <ul id="tabTitle">
            <li class="active">HTML5</li>
            <li>PHP</li>
            <li>Java</li>
        </ul>
    </div>


    <div class="mdiv2" >
        <div class="zdiv" id="div1" style="display: block">
            HTML5
        </div>
        <div class="zdiv" id="div2">
            PHP
        </div>
        <div class="zdiv" id="div3">
            Java
        </div>

    </div>
</div>


<style type="text/css">

	/* html, */
	body{
		height:100%;
		padding: 0;
		margin: 0;
		/* overflow: hidden; */
	}

	.outer {
		height: 100%;
		padding: 100px 0 0;
		box-sizing: border-box;
	}

	.mdiv {
		width: 100%;
		/* height: calc(100vh - 44px); */
		height:50px;
		/* border: 0px solid #008000; */
		/* position: absolute; */
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.mdiv2 {
		height: calc(100vh - 50px);
		/* height:80vh; */
		/* height:100%; */
		border: 1px solid black;
		/* overflow: scroll; */
	}

	/* ul {
		height:20%;
	} */

	li {
		width: 70px;
		height: 20px;
		list-style: none;
		float: left;
		padding: 5px 10px;
		border: 1px solid #008000;
		margin: 5px;
		text-align:center;
	}

	.zdiv {
		/* width: 100%; */
		height:100%;

		clear: both;
		margin-left: 5px;
		margin-right: 5px;
		display: none;
		word-break:break-all;
		/* word-wrap:break-word; */

		/* min-height: 300px; */
		/* height:100vh; */
		/* height:calc(100vh - 44px); */
	}

    .active {
        background: palegreen;
    }
</style>

<script type="text/javascript">

	$(function() {
		var ht = $(document.body).height();
		//$("#div1").height(ht);

		alert("==="+ht);
	  	// alert("==="+$("#div3").html());
		$("#div1").html("12424");


		$.ajax({
			type: "GET",
			// url: "http://localhost:8080/web2/getServerList",  	//http://192.168.50.212:8080/web2/getServerList
			// url: "http://192.168.0.104:8080/web2/getServerList",
			url: "http://192.168.50.212:8080/web2/getServerList",
			//url: "http://localhost:8080/web2/getServerList?telephone=1&flag=true",
			// url: "http://192.168.50.212:8080/web2/getServerList?telephone=1&flag=true",
			// url: "http://192.168.0.104:8080/web2/getServerList?telephone=1&flag=true",
			data: {telephone:'1', flag:true},
			// dataType: "json",
			// data: "telephone=1&flag=true",
			// headers: { // 默认添加请求头
			// 	// "Access-Control-Allow-Origin": "*",
			// 	"Referer": "https://codeplayer.vip",
			// 	"User-Agent": "newLine",
			// 	"X-Power": "newLine",
			// 	"Accept-Language": "en-US"
			// },
			success: function(data){
				alert("==="+JSON.stringify(data))
				$("#div1").html(data);
				// alert("==="+data)
				// $("#send").text(data.body);
			},
			error: function (data) {
				$('#div1').html(">>>"+JSON.stringify(data));
			}
		});



		// $.ajax({
		// 	type: "POST",
		// 	url: "https://birds.qst-iot.com/Home/SaveFarmShare",
		// 	data: {"farmName":"a"},
		// 	dataType: "json",
		// 	success: function(data){
		// 		alert("==="+JSON.stringify(data))
		// 		$("#div1").html(data);
		// 	}
		// });



	  	var oUl = document.getElementById("tabTitle");
	  	var aLi = oUl.getElementsByTagName('li');
	  	var aDiv = document.getElementsByTagName('div');

	  	for(var i = 0; i < aLi.length; i++) {
	  	    aLi[i].index = i;
	  	    aLi[i].onclick = function() {
	  	        for(var i = 0; i < aLi.length; i++) {
	  	            aLi[i].className = '';
	  	            aDiv[i].style.display = 'none';
	  	        }
	  	        this.className = 'active';
	  	        aDiv[this.index].style.display = 'block';
	  	    };
	  	};
	});
	
  //   window.onload = function() {
		
  //   };
</script>
</body>
</html>